<template>
  <div class="app-container">
    <div class="container-bg">
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          width="600px"
          :model="form"
          size="medium"
          label-width="135px"
          style="max-width: 1200px"
        >
          <el-col :span="24">
            <el-form-item label="是否认证" prop="iEnableAccess">
              <el-switch
                v-model="form.iEnableAccess"
                active-value="1"
                inactive-value="0"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="平台接入方式" prop="sAccessMode">
              <el-select v-model="form.sAccessMode" :style="{ width: '100%' }">
                <el-option label="28181" value="28181" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="sPassword">
              <el-input
                type="password"
                v-model="form.sPassword"
                placeholder="请输入密码"
                :style="{ width: '100%' }"
                show-password
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传输协议" prop="sTransportProtocol">
              <el-input
                v-model="form.sTransportProtocol"
                placeholder="请输入传输协议"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="确认密码" prop="sPasswordConfirm">
              <el-input
                type="password"
                v-model="form.sPasswordConfirm"
                placeholder="请输入确认密码"
                :style="{ width: '100%' }"
                show-password
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="协议版本" prop="sProtocolVersion">
              <el-input
                v-model="form.sProtocolVersion"
                placeholder="请输入传输协议"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册有效期" prop="iRegisterValidityPeriod">
              <el-input
                type="number"
                v-model="form.iRegisterValidityPeriod"
                placeholder="请输入注册有效期"
                :style="{ width: '100%' }"
              >
                <template slot="append"><span>秒</span></template>
              </el-input>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item label="SIP服务器ID" prop="sSipServerID">
              <el-input
                type="number"
                v-model="form.sSipServerID"
                placeholder="请输入"
                :style="{ width: '100%' }"
              >
              </el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="注册状态" prop="sRegisterState">
              <el-select
                v-model="form.sRegisterState"
                :style="{ width: '100%' }"
              >
                <el-option label="在线" :value="0" />
                <el-option label="离线" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SIP服务器域" prop="sSipServerDomain">
              <el-input
                type="number"
                v-model="form.sSipServerDomain"
                placeholder="请输入"
                :style="{ width: '100%' }"
              >
              </el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="心跳周期" prop="iHeartbeatCycle">
              <el-input
                type="number"
                v-model="form.iHeartbeatCycle"
                placeholder="请输入"
                :style="{ width: '100%' }"
              >
                <template slot="append"><span>秒</span></template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SIP服务器地址" prop="sSipServerAddress">
              <el-input
                v-model="form.sSipServerAddress"
                placeholder="请输入"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="本地SIP端口" prop="iLocalSipPort">
              <el-input
                type="number"
                v-model="form.iLocalSipPort"
                placeholder="请输入"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SIP服务器端口" prop="iSipServerPort">
              <el-input
                type="number"
                v-model="form.iSipServerPort"
                placeholder="请输入"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="28181码流索引" prop="s28181StreamIndex">
              <el-select
                v-model="form.s28181StreamIndex"
                :style="{ width: '100%' }"
              >
                <el-option label="主码流(定时)" :value="0" />
                <el-option label="子码流(定时)" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SIP用户名" prop="sSipUsername">
              <el-input
                type="number"
                v-model="form.sSipUsername"
                placeholder="请输入"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册间隔" prop="iRegisterDuration">
              <el-input
                type="number"
                v-model="form.iRegisterDuration"
                placeholder="请输入"
                :style="{ width: '100%' }"
              >
                <template slot="append"><span>秒</span></template>
              </el-input>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item label="SIP用户认证ID" prop="sSipIdentificationID">
              <el-input
                type="number"
                v-model="form.sSipIdentificationID"
                placeholder="请输入"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="最大心跳超时次数"
              prop="iHeartbeatMaxTimesTimeout"
            >
              <el-input
                type="number"
                v-model="form.iHeartbeatMaxTimesTimeout"
                placeholder="请输入"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="编码ID">
              <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="报警输入编码ID" name="first"> </el-tab-pane>
                <el-tab-pane label="视频通道编码ID" name="second"></el-tab-pane>
                <el-tab-pane
                  label="语音输出通道编码ID"
                  name="third"
                ></el-tab-pane>
              </el-tabs>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="number" label="通道号" width="180" />
                <el-table-column prop="id" label="通道编码ID" />
              </el-table>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item>
              <el-button
                type="primary"
                size="small"
                style="width: 120px"
                @click="submitForm"
                :loading="isLoading"
                >保存
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getGb28181Api, editGb28181Api } from "@/api/network";

export default {
  // props: {
  //   info: {
  //     type: Object,
  //     default() {
  //       return {};
  //     },
  //   },
  // },
  data() {
    return {
      activeName: "first",
      isLoading: false,
      form: {
        iEnableAccess: "",
        sAccessMode: "",
        sPassword: "",
        sTransportProtocol: "",
        sPasswordConfirm: "",
        sProtocolVersion: "",
        iRegisterValidityPeriod: "",
        sSipServerID: "",
        sRegisterState: "",
        sSipServerDomain: "",
        iHeartbeatCycle: "",
        sSipServerAddress: "",
        iLocalSipPort: "",
        iSipServerPort: "",
        s28181StreamIndex: "",
        sSipUsername: "",
        iRegisterDuration: "",
        sSipIdentificationID: "",
        iHeartbeatMaxTimesTimeout: "",
      },
      tableData: [
        {
          number: "1",
          id: "34020000001320001234",
        },
        {
          number: "2",
          id: "34020000001320001235",
        },
      ],
    };
  },
  created() {
    this.getGb28181();
  },
  methods: {
    getGb28181() {
      getGb28181Api().then((res) => {
        // console.log(res);
        this.form = res[0];
        // console.log(this.form);
      });
    },
    submitForm() {
      editGb28181Api(this.form).then((res) => {
        // console.log(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
